@import 'base';
@import 'slidelmage';
.murkBox {
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100;
  width: 1519px;
  height: 959px;
  display: none;
}
body {
  position: relative;
  font: Microsoft YaHei;
}
.murk {
  position: fixed;
  width: 947px;
  height: 604px;
  top: 59px;
  left: 282px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  box-shadow: 0 3px 10px #ccc;
}
.murk_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f3f3f3;
  height: 30px;
  color: #000;
  font-weight: 700;
  padding: 10px;
  box-sizing: border-box;
}
.murk_con {
  padding: 0 20px;
  height: 454px;
  background: #fff;
  overflow-y: auto;
  a {
    color: red;
    text-decoration: underline;
  }
}

.perch {
  height: 20px;
}
.murk_fot {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.agree {
  display: block;
  width: 400px;
  height: 54px;
  text-align: center;
  line-height: 54px;
  background: red;
  color: white;
  outline: none;
  border: 0;
  font-size: 20px;
}

/********************** header nurkBox end   **********************/
.main-header-box {
  background: url(../image/headbg.jpg) repeat-x bottom;
}
.main-header {
  width: 1210px;
  margin: 0 auto;
  height: 110px;
}
.main-header-left {
  float: left;
  > a {
  background: url(../image/icon.png) no-repeat;
  display: block;
  width: 160px;
  height: 50px;
  float: left;
  margin-top: 24px;
}
> p {
  float: left;
  margin-top: 34px;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
}
}

.main-header-right {
  float: right;
  margin-top: 55px;
  > span {
  color: #999;
}
> a {
  color: #e22;
  &:hover {
  text-decoration: underline;
}
  }
}
/***************** main  header  end  ************************/
.main-con-box {
  margin: 0 auto;
  margin-top: 80px;
}
.main-con {
  width: 400px;
  margin: 0 auto;
  height:634px;
}
.main-con-header {
  position: relative;
   > div{
     > span {
      display: block;
      width: 24px;
      height: 24px;
      font-size: 12px;
      line-height: 24px;
      text-align: center;
      margin: 0 auto;
    }
    > p {
      font-size: 12px;
      margin-top: 10px;
      color: #ccc;
    }
  } 
  span {
  color: #ccc;
  }
  .color {
  color: #3b4;
}
}

.main-con-header-left {
  float: left;
  > span {
  background: url(../image/reg-icon.png) no-repeat 0 -200px;
  color: #fff;
}
}

.boult-left {
  position: absolute;
  background: url(../image/reg-icon.png) no-repeat 0 -100px;
  height: 10px;
  top: 7px;
  width: 124px;
  left: 57px;
}
.main-con-header-con {
  float: left;
  margin-left: 110px;
  > span {
  background: url(../image/reg-icon.png) no-repeat;
  background-position: -45px -200px;
}
}
.boult-right {
  position: absolute;
  background: url(../image/reg-icon.png) no-repeat 0 -100px;
  height: 10px;
  top: 7px;
  width: 124px;
  left: 228px;
}
.main-con-header-right {
  float: left;
  margin-left: 110px;
  > span {
  background: url(../image/reg-icon.png) no-repeat -45px -200px;
}
}
.main-form{
  margin: 50px auto 0px;
  .i-error{
    background-position: 0 -100px;
  }
}

.user,.user2,.pass,.pass2{
  width:400px;
  border:1px solid rgb(221,221,221);
  line-height:50px;
  display: block;
  position: relative;
  p{
    float: left;
    width:107px;
    height:50px;
    text-align: center;
    span{
      color:#666;
    }
  }
  input{
    float: left;
    height:50px;
    border-left:1px solid rgb(221,221,221);
    text-indent: 1rem;
    font-size:14px;
  }
  &:hover{
    border:1px solid rgb(153,153,153);
    input{
      border-left:1px solid rgb(153,153,153);
    }
  }
}
.userBox{
  height:86px;
  position: relative;
  >p{
    font-size:12px;
    color:#c5c5c5;
    padding-top:5px;
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
  }
  .i-status{
    background-position: -0px -117px;
    position: absolute;
      top: 22px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
  .i-cancle{
    background:url(../image/reg-icon.png)no-repeat;
    background-position: -80px -160px;
    position: absolute;
      width: 12px;
      height: 12px;
      top: 22px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
}
.error{
  display: none;
}
.btnBox{
  height:86px;
  position: relative;
  width:400px;
  color:#333;
  .testBtn{
    width:400px;
    height:52px;
    text-align:center;
    line-height: 52px;
    border:1px solid rgb(221,221,221);
    background:#fff;
    cursor: pointer;
    &:hover{
      border-color: #666;
    }
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
    
  }
  .t-error{
    height:27px;
    padding-top:5px;
    display: none;
    width:107px;
    line-height:18px;
    .ti-error,.thint{
      float: left;
      font-size:14px;
    }
  }
}
.regSlidelmageBox{
  padding:12px 12px 12px 20px;
  background:#fefefe;
  position: absolute;
  left:0;
  bottom:96px;
  box-shadow: 0 0 2px 2px #eee;
  border:1px solid #eee;
  display: none;
  .close{
    cursor: pointer;
    z-index: 100;
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(../image/x.png);
  }
  .arrow{
    display: block;
    position: absolute;
    background-image: url(../image/tips.gif);
    background-repeat: no-repeat;
    width: 16px;
    height: 8px;
    background-position: 0 -8px;
    overflow: hidden;
    bottom: -8px;
    left: 190px;
  }
  .regSlidelmageBox_title{
    line-height:24px;
  }
}
.regSlidelmage{
  width:370px;
  height:240px;
}
.timeOut{
  width:400px;
  height:86px;
  line-height:50px;
  display: block;
  position: relative;
  display: none;
  p{
    float: left;
    width:107px;
    height:50px;
    height:50px;
    text-align: center;
    span{
      color:#666;
      font-size:14px;
    }
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
  }
  
  .ti-status{
    background-position: -0px -117px;
    position: absolute;
      top: 18px;
      right: 120px;
      cursor: pointer;
      display:none; 
  }
  .ti-cancle{
    background:url(../image/reg-icon.png)no-repeat;
    background-position: -80px -160px;
    position: absolute;
      width: 12px;
      height: 12px;
      top: 18px;
      right: 120px;
      cursor: pointer;
      display: none;
  }
  input{
    float: left;
    height:50px;
    text-indent: 1rem;
    font-size:14px;
    width:152px;
    font-size:14px;
  }
  .time-con{
    border: solid 1px #ddd;
    float: left;
    width:283px;
    font-size:14px;
    &:hover{
      border:1px solid rgb(153,153,153);
    }
  }
  .resetRex{
    float:left;
    text-indent: 0;
    background:#fff;
    width:117px;
    color:#ccc;
    border-top: 1px solid rgb(221, 221, 221);
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left: none;
    text-align: center;
    display: block;
    height:52px;
    font-size:14px;
    &:hover{
      border:1px solid rgb(153,153,153);
    }
  }
  >.t3-error{
    height:27px;
    padding-top:5px;
    display: none;
    width:400px;
    line-height:18px;
    
    .t3i-error,.t3hint{
      float: left;
      font-size:14px;
      color: #ccc ;
    }
    .t3i-error{
      background-position:0px -100px;
    }
  }
}
.codeRegBox{
  margin-top:20px;
  width:400px;
  .codeRegBtn{
    width:400px;
    height:54px;
    line-height:54px;
    text-align: center;
    cursor: pointer;
    background:#e2231a;
    color:white;
    font-size:16px;
  }
}
/*******************  reg1 end ************************/
.reg2-box{
  width:400px;
  
  display: none;
  .userBox2{
    height:86px;
    width:400px;
  }
}

/***/

.userBox2{
  height:86px;
  position: relative;
  >p{
    font-size:12px;
    color:#c5c5c5;
    padding-top:5px;
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
  }
  .t2i-status{
    background-position: -0px -117px;
    position: absolute;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
  .t2i-cancle{
    background:url(../image/reg-icon.png)no-repeat;
    background-position: -80px -160px;
    position: absolute;
      width: 12px;
      height: 12px;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
.t2error{
  height:27px;
  padding-top:5px;
  display: none;
  width:400px;
  line-height:18px;
  color:#f91;
  .t2i-error,.t2hint{
    float: left;
    font-size:14px;
  }
  .t2i-error{
    background-position:-17px -100px;
  }
}

}
/****/

.passBox{
  height:86px;
  position: relative;
  >p{
    font-size:12px;
    color:#c5c5c5;
    padding-top:5px;
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
  }
  .pi-status{
    background-position: -0px -117px;
    position: absolute;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
  .pi-cancle{
    background:url(../image/reg-icon.png)no-repeat;
    background-position: -80px -160px;
    position: absolute;
      width: 12px;
      height: 12px;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
.perror{
  height:27px;
  padding-top:5px;
  display: none;
  width:400px;
  line-height:18px;
  color:#f91;
  .pi-error,.phint{
    float: left;
    font-size:14px;
  }
  .pi-error{
    background-position:-17px -100px;
  }
}

}
/*****/
.passBox2{
  height:86px;
  position: relative;
  >p{
    font-size:12px;
    color:#c5c5c5;
    padding-top:5px;
  }
  i{
    width:16px;
    height:16px;
    display: inline-block;
    margin-right:8px;
    vertical-align: text-top;
    background:url(../image/icon.png)no-repeat;
  }
  .p2i-status{
    background-position: -0px -117px;
    position: absolute;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
  .p2i-cancle{
    background:url(../image/reg-icon.png)no-repeat;
    background-position: -80px -160px;
    position: absolute;
      width: 12px;
      height: 12px;
      top: 18px;
      right: 20px;
      cursor: pointer;
      display: none;
     
  }
.p2error{
  height:27px;
  padding-top:5px;
  display: none;
  width:400px;
  line-height:18px;
  color:#f91;
  .p2i-error,.phint{
    float: left;
    font-size:14px;
  }
  .p2i-error{
    background-position:-17px -100px;
  }
}

}

/****/
.regBtnBox{
  width:400px;
  height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    background: #e2231a;
    border: 0;
    font-size: 16px;
    cursor: pointer;
}

/****/
.reg3-box{
  width:400px;
  height:246px;
  position: relative;
  display: none;
  .reg3-success{
    text-align: center;
    padding:76px;
    >span{
      width:70px;
      height:70px;
      display: inline-block;
      margin-right:8px;
      vertical-align: text-top;
      background:url(../image/icon.png)no-repeat;
      background-position: -100px -50px;
    }
    p{
      font-size:30px;
      line-height:100px;
      text-align: center;
      color:#000;
    }
  }
  .reg3-msg{
    position: absolute;
    width:300px;
    left:50px;
    top:0px;
    color:#ccc;
    font-size:16px;
    height:30px;
    line-height:30px;
    >span{
      text-align: left;
      float: left;
    }
    >a{
      float: right;
      color:#f91;
      &:hover{
        text-decoration: underline;
        color:#e2231a;
      }
    }
  }
}
.reg-other{
  margin-top:28px;
  height:28px;
  font-size:14px;
  color:#333;
  .reg-other-icon{
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background: url(../image/reg-icon.png);
  }
  .reg-other-person{
    float:left;
    i{
      background-position: 0 -160px;
    }
  }
  .reg-other-inter{
    float:right;
    i{
      background-position: -40px -160px;
    }
  }
}
/******************* main-con end  *****************/
.main-foot-box{
  width:1210px;
  margin:0 auto;
  font-size: 12px;
    text-align: center;
    border-top: solid 1px #e6e6e6;
    color: #999;
    padding-bottom: 30px;
}
.ob-link{
  padding-top: 30px;
  padding-bottom:15px;
  >a{
    color:#999;
    margin:0 10px;
    &:hover{
      text-decoration: underline;
    }
  }
}

